<template>
  <view class="flex-1 flex flex-col">
    <view
      class="text-theme font-bold text-xl mx-auto text-center mb-6 mt-[56rpx]"
      >钧韬竞速体育评分</view
    >
    <view class="pr-4 pl-5">
      <customSteps current="1" />
    </view>
    <view class="px-3 mt-[60rpx]" v-if="list.length">
      <view
        v-for="(item, index) in list"
        :key="index"
        @click="next(item)"
        class="w-full h-[298rpx] rounded-xl bg flex flex-col justify-between mt-[26rpx]"
      >
        <view></view>
        <view class="text-[48rpx] text-[#2E6CE8] font-bold text-center pt-4">{{
          item.name
        }}</view>
        <view class="flex justify-between items-center pb-4 px-[26rpx]">
          <view class="flex items-center">
            <image
              src="@/static/pelple.png"
              class="w-[26rpx] h-[26rpx]"
            ></image>
            <view class="text-[#1666F0] text-xs font-[300] pl-[10rpx]"
              >{{ item.persons }}人已参与测评</view
            >
          </view>
          <view class="text-[#3E6EC1] text-xs font-bold"> 点击进入</view>
        </view>
      </view>
    </view>
    <view
      class="flex-1 flex justify-center items-center py-7 pb-20 mb-20"
      v-else
    >
      <up-empty
        textSize="14"
        textColor="#D5D5D5"
        text="暂无数据"
        icon="/static/empty.png"
        width="106"
        height="106"
      >
      </up-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getScoreList_api } from "@/api/index.js";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
const next = (e) => {
  uni.navigateTo({
    url: `/pages/index/calculator?id=${e.area_id}&type=${e.score_type}`,
  });
};

const list = ref([]);
const getList = (area_id) => {
  getScoreList_api(area_id).then((res) => {
    list.value = res;
  });
};
onLoad(({ id }) => {
  getList(id);
});
</script>

<style lang="scss" scoped>
.bg {
  background: linear-gradient(
    139deg,
    #deecff 0%,
    rgba(231, 241, 255, 0.95) 33%,
    rgba(192, 217, 254, 0.63) 67%,
    rgba(162, 200, 255, 0.7) 100%
  );
}
</style>
